<template>
  <div>
    <el-table
      :data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="name" label="课程名称" min-width="20">
        <template slot-scope="scope">
          <el-button type="text">{{ scope.row.name }}</el-button>
          <el-tag v-if="scope.row.type" type="warning">{{ scope.row.type }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="shopNum" label="购买数" min-width="10"/>
      <el-table-column prop="viewNum" label="访问数" min-width="5"/>
      <el-table-column prop="shopRate" label="购买率" min-width="5"/>
      <el-table-column prop="detail" label="详情" min-width="10">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleClickDetail(scope)">详细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <p style="margin-bottom:0;margin-left:30px;">
      注：列表结果中，不会包含没有访问过的课程
      <br>总购买转化率： 0 %
    </p>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <el-dialog :visible.sync="dialogVisible" :title="dialog.title">
      <el-table :data="gridData">
        <el-table-column property="dialog.content" label="内容" min-width="10"/>
        <el-table-column property="dialog.type" label="类型" min-width="10"/>
        <el-table-column property="dialog.shopNum" label="购买数" min-width="10"/>
        <el-table-column property="dialog.price" label="价格" min-width="10"/>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 分页组件
export default {
  components: {
    Pagination
  },
  data() {
    return {
      dialog: {
        title: '',
        content: '',
        type: '',
        shopNum: '',
        price: ''
      },
      gridData: [],
      dialogVisible: false,
      total: 2,
      currentpage: 1,
      pagesize: 10,
      tableData: [
        {
          name: '会计中级公开课',
          shopNum: '0',
          viewNum: '0',
          shopRate: '0%',
          type: '直播'
        },
        {
          name: '会计高级公开课',
          shopNum: '0',
          viewNum: '0',
          shopRate: '0%'
        }
      ]
    }
  },
  methods: {
    handleClickDetail(scope) {
      this.dialogVisible = true
      this.dialog.title = scope.row.name
    },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    }
  }
}
</script>
